<template>
	<div>
		<Form inline style="margin-bottom: 10px;">
			<Input type="text" placeholder="发布单号" class="w200 m-r10" v-model.trim="query.orderId" />
			<Input type="text" placeholder="手机号码" class="w200 m-r10" v-model.trim="query.phone" />
			<Select placeholder="请选择方向" class="w200 m-r10" v-model="query.state">
				<Option value="-1">全部</Option>
				<Option value="0">买入</Option>
				<Option value="1">卖出</Option>
			</Select>
			<Select placeholder="请选择状态" class="w200 m-r10" v-model="query.state2">
				<Option value="-1">全部</Option>
				<Option value="0">下架</Option>
				<Option value="1">上架</Option>
				<Option value="2">完结</Option>
				<Option value="3">取消</Option>
			</Select>
			<DatePicker type="daterange" split-panels placeholder="请选择时间段" class="w200 m-r10" format="yyyy-MM-dd" @on-change="getTime">
			</DatePicker>
			<Button type="primary" v-on:click="getList">查询</Button>
		</Form>
		<Table :columns="columns" ref="table" :data='list' :loading="loading"></Table>
		<Page :total="info" show-elevator :page-size="pageSize" show-total @on-change="cuctGetQuery" :current.sync="page"></Page>
	</div>
</template>
<script>
	export default {
		props: {
			list: Array,
			loading: Boolean,
			id: String,
			info: Number
		},
		data() {
			return {
				query: {
					uuid: '',
					orderId: '',
					phone: '',
					state: '-1',
					state2: '-1',
				},
				dataValue: ['', ''],
				columns: [{
						title: '订单单号',
						key: 'orderNum',
						align: 'center',
						render: (h, params) => {
							return h('div', {
								style: {
									cursor: "pointer",
									color: "#2db7f5"
								},
								on: {
									click: () => {
										localStorage.orderNum = params.row.orderNum;
										this.$router.push({
											path: '/OTCAgent/agentRecord',
										})
									}
								}
							}, params.row.orderNum == null ? '#' : params.row.orderNum);
						}
					},
					{
						title: '发布类型',
						key: 'type',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.type == null ? '#' : params.row.type == 0 ? '收购' : params.row.type == 1 ? '出售' : '#');
						}
					},
					{
						title: '订单状态',
						key: 'orderNum',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.status == null ? '#' : params.row.status == 0 ? '下架' : params.row.status == 1 ? '上架' : params.row.status == 2 ? '完结' : params.row.status == 3 ? '取消' : '#');
						}
					},
					{
						title: '发布数量',
						key: 'releaseNum',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.releaseNum == null ? '#' : params.row.releaseNum);
						}
					},
					{
						title: '成交数量',
						key: 'successNum',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.successNum == null ? '#' : params.row.successNum);
						}
					},
					{
						title: '剩余数量',
						key: 'residueNum',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.residueNum == null ? '#' : params.row.residueNum);
						}
					},
					{
						title: '发布日期',
						key: 'createTime',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.createTime == null ? '#' : this.stringToTime(params.row.createTime));
						}
					},

				],
				modal1: false,
				page: 1,
				pageSize: 10,
			}
		},
		methods: {
			cuctGetQuery() {

			},
			getTime(daterange) {
				this.dataValue = daterange;
			},
			getList() {
				this.$emit('success', {
					uuid: this.id,
					orderNum: this.query.orderId,
					username: this.query.phone,
					type: this.query.state == '-1' ? '' : this.query.state,
					status: this.query.state2 == '-1' ? '' : this.query.state2,
					startTime: this.dataValue[0] == "" ? "" : this.dataValue[0] + ' 00:00:00',
					endTime: this.dataValue[1] == "" ? "" : this.dataValue[1] + ' 23:59:59',
					current: this.page,
					size: this.pageSize,
				});
				//				this.axios.post('/admin/otc/getOtcOrder', this.qs.stringify({
				//					current: this.page,
				//					size: this.pageSize,
				//					uuid: this.id,
				//					orderNum: this.query.orderId,
				//					username: this.query.phone,
				//					type: this.query.state == '-1' ? '' : this.query.state,
				//					status: this.query.state2 == '-1' ? '' : this.query.state2,
				//					startTime: this.dataValue[0],
				//					endTime: this.dataValue[1],
				//				})).then(res => {
				//					if(res.data.code == 200) {
				//						this.list = res.data.data.records;
				//						this.info = res.data.data.total;
				//						setTimeout(() => {
				//							this.loading = false;
				//						}, 500)
				//					}
				//				})
			}
		}
	};
</script>

<style scoped>
	.expand-row {
		margin-bottom: 16px;
	}
</style>